<template>
	<view class="homeLayout pageBg">
		
		<my-nav-bar title="首页"></my-nav-bar>
				
		<!-- 轮播图 -->
		<view class="banner">
			<swiper indicator-dots indicator-color="rgba(222,222,222, 0.888)" indicator-active-color="#fff" autoplay circular>
				
				<swiper-item v-for="item in bannerList" :key="item._id">
					<image :src="item.picurl" mode="aspectFill"></image>
				</swiper-item>
				
				<swiper-item v-for="item in 3">
					<image src="../../common/images/mengbimao.gif" mode="aspectFill"></image>
				</swiper-item>
				
			</swiper>
		</view>
		
		<!-- 公告 -->
		<view class="notice">
			<view class="left">
				<uni-icons class="leftUniIcons" type="sound-filled" size="20"></uni-icons> 
				<text class="leftText">left</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="3000" duration="300" circular>
					<swiper-item v-for="item in 4">
						公告内容 {{item}} : 内容内容内容内容内容内容内容内容内容内容内容
					</swiper-item>
					<swiper-item v-for="item in noticeList" :key="item._id">
						<!-- 公告内容 {{item}} : 内容内容内容内容内容内容内容内容内容内容内容 -->
						{{item.title}}
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		
		<view class="select">
			<common-title>
				<template #left> 每日推荐 </template>
				<template #right> 
					<view class="date">
						<uni-icons type="calendar" size="20"></uni-icons>
						<view class="dateText">
							<uni-dateformat :date="Date.now()" format="yyyy年MM月dd日"></uni-dateformat>
						</view>
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x>
					
					<view class="box" v-for="item in randomList" @click="toUrl('../../pages/preview/preview')">
						<image :src="item.smallPicurl" mode="aspectFill" ></image>
					</view>
					
					<view class="box" v-for="item in 5" @click="toUrl('../../pages/preview/preview')">
						<image src="../../static/cute.jpg" mode="aspectFill" ></image>
					</view>
					
				</scroll-view>
			</view>
		</view>
		
		<view class="theme">
			<common-title>
				<template #right> 专题精选 </template>
				<template #custom> 
					<navigator url="" class="more"> More+ </navigator>
				</template>
			</common-title>
			
			<view class="content">
				<!-- 不传值，所以isMore的值默认false -->
				<theme-item v-for="item in 5"></theme-item>
				<theme-item v-for="item in classifyList" :key="item._id" :item="item"></theme-item>
				<theme-item :isMore="true"></theme-item>
			</view>
		</view>
	
	</view>
</template>

<script setup>
	
	import {ref} from 'vue';
	import { api_getBanner, api_getDayRandom, api_getNotice, api_getClassify } from "@/api/apis.js"
	
	const bannerList = ref( [] );
	const randomList = ref( [] );
	const noticeList = ref( [] );
	const classifyList = ref( [] );
	
	const getBanner = async function(){
		let res = await api_getBanner();
		// let res = await uni.request({
		// 	url:"https://tea.qingnian8.com/api/bizhi/homeBanner",
		// 	// header:{
		// 	// 	"access-key": "vincentzyu"
		// 	// }
		// })
		console.log("getBanner(): ");
		console.log(res);
		// console.log(res.data);
		// console.log(res.data.errCode);
		if (res.errCode===0){
			bannerList.value = res.data;
		}
	}
	
	const getDayRandom = async function(){
		let res = await api_getDayRandom();
		// let res = await uni.request({
		// 	url: "https://tea.qingnian8.com/api/bizhi/randomWall",
		// })
		console.log("getDayRandom(): ");
		console.log(res);
		// console.log(res.data);
		// console.log(res.data.errCode);
		if (res.errCode===0){
			randomList.value = res.data;
		}
	}
	
	const getNotice = async function(){
		let res = await api_getNotice( {select: true} );
		noticeList.value = res.data;
		console.log("getNotice(): ");
		console.log(res);
		
/* 		let res = await uni.request({
			url: "https://tea.qingnian8.com/api/bizhi/wallNewsList",
			// header:{
			// 	"access-key":　"vincentzyu"
			// },
			data:{
				select: true,
				// pageSize: 3,
			}
		})
		console.log("Notice: ")
		console.log(res);
		noticeList.value = res.data.data; */
	}
	
	const getClassify = async function(){
		let res = await api_getClassify( {pageSize:3} );
		classifyList.value = res.data;
		console.log("getClassify(): ");
		console.log(res);
	}
	
	
	const toUrl=(url)=>{
		uni.navigateTo({
			url:`${url}`
		})
	}
	
	getBanner();
	getDayRandom();
	getNotice();
	getClassify();

</script>

<style lang="scss" scoped>
	
	.homeLayout{
		display: flex;
		flex-direction: column;
		
		// 轮播图		
		.banner{
			// border: 1px solid red;
			
			width: 750rpx;
			padding: 30rpx 0;
			swiper{
				// border: 1px solid red;
				
				width: 750rpx;
				height: 340rpx;
				swiper-item{
					// border: 1px solid red;
					width: 100%;
					height: 100%;
					padding: 0 30rpx; //给照片的父级添加左右边距
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}
	
		// 公告
		.notice{
			// z-index: 114514;
			// border: 1px solid red;
			line-height: 80rpx;
			width: 690rpx;
			height: 80rpx;
			background: #f9f9f9;
			margin: 0 auto;
			border-radius: 80rpx;
			display: flex;
			
			
			.left{
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.leftText{
					color: $theme-green;
					font-weight: 600;
					font-size: 28rpx;
				}
				// .leftUniIcons{
				// 	color:　$theme-green !important;
				// }
				:deep(){
					.leftUniIcons{
						color: $theme-green !important;
					}
				}
			}
			.center{
				flex: 1;
				swiper{
					height: 100%;
					&-item{ //简化写法，&代表父级
						height: 100%;
						font-size: 30rpx;
						color: #777;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
			.right{
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
		}
	
		.select{
			padding-top: 50rpx;
			.date{
				color:#28b389;
				display: flex;
				align-items: center;
				.dateText{
					margin-left: 5rpx;
				}
				:deep(){
					.uni-icons{
						color: $theme-green !important;
					}
				}
			}
			.content{
				width: 720rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;
				scroll-view{
					white-space: nowrap;
					.box{
						width: 200rpx;
						height: 400rpx;
						display: inline-block;
						margin-right: 15rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.box:last-child{
						margin-right: 30rpx;
					}
				}
			}
		}
	
		.theme{
			//内边距：上下 左右
			padding: 50rpx 0;
			.more{
				font-size: 32rpx;
				color: #888;
			}
			.content{
				margin-top: 30rpx;
				padding: 0 30rpx;
				display: grid; //网格布局
				gap: 15rpx;
				grid-template-columns: 1fr 1fr 1fr; //fr三分之一 响应式单位
				
			}
		}
		
	}

</style>
